<style media="screen">
  .head-container {
    position: relative;
    padding: 10px 0px 14px;
    border-bottom: 1px solid #E3E3E5;
  }

  .head-container .mes {
    overflow: hidden;
    margin-right: 10px;
    float: left;
  }

  .head-container .mes p {
    font-size: 12px;
    color: #CFCFCF;
    margin-bottom: 6px;
  }

  .head-container .mes input {
    width: 200px;
    height: 34px;
  }

  .head-container .flow {
    float: left;
    margin-right: 10px;
  }

  .head-container .flow p {
    font-size: 12px;
    color: #CFCFCF;
    margin-bottom: 6px;
  }

  .head-container .flow .flow-select {
    width: 140px;
    height: 34px;
  }

  .head-container .button-group {
    padding-top: 23px;
  }

  .thisMonth {
    margin: 7px 34px 0 10px;
    font-size: 14px;
    color: #337AB7;
    cursor: pointer;
  }

  .change-abs {
    position: absolute;
    width: 46px;
    height: 20px;
    background: rgba(240, 242, 255, 1);
    border-radius: 12px 2px 12px 2px;
    right: 0;
    top: 10px;
    line-height: 20px;
    color: rgba(109, 122, 226, 1);
    font-size: 12px;
    text-align: center;
  }

  .bill-statistics .item {
    display: flex;
    align-items: center;
    width: 300px;
    height: 44px;
    border-radius: 4px;
    box-shadow: 0px 0px 4px 0px rgba(208, 218, 226, 0.5);
    overflow: visible;
  }

  .bill-statistics .item .icon {
    clear: both;
    font-size: 14px;
    margin-right: 6px;
    height: auto;
    margin-top: 0px;
  }

  .bill-statistics .item .name {
    clear: both;
  }

  .bill-statistics .item001 {
    background: rgba(109, 122, 226, 0.3);
  }

  .bill-statistics .item001 i {
    color: rgba(109, 122, 226, 1);
  }

  .bill-statistics .item001 .name {
    font-size: 18px;
    color: rgba(109, 122, 226, 1);
  }

  .bill-statistics .item001 .name span {
    margin-right: 10px;
    font-size: 14px;
    color: rgba(109, 122, 226, 0.6);
  }

  .bill-statistics .item002 {
    background: rgba(92, 159, 243, 0.3);
  }

  .bill-statistics .item002 i {
    color: rgba(92, 159, 243, 1);
  }

  .bill-statistics .item002 .name {
    font-size: 18px;
    color: rgba(92, 159, 243, 1);
  }

  .bill-statistics .item002 .name span {
    margin-right: 10px;
    font-size: 14px;
    color: rgba(92, 159, 243, 0.6);
  }

  .bill-statistics .item003 {
    background: rgba(255, 171, 38, 0.3);
  }

  .bill-statistics .item003 i {
    color: rgba(255, 171, 38, 1);
  }

  .bill-statistics .item003 .name {
    font-size: 18px;
    color: rgba(255, 171, 38, 1);
  }

  .bill-statistics .item003 .name span {
    margin-right: 10px;
    font-size: 14px;
    color: rgba(255, 171, 38, 0.6);
  }

  .bill-statistics .item004 {
    background: rgba(145, 188, 84, 0.3);
  }

  .bill-statistics .item004 i {
    color: rgba(145, 188, 84, 1);
  }

  .bill-statistics .item004 .name {
    font-size: 18px;
    color: rgba(145, 188, 84, 1);
  }

  .bill-statistics .item004 .name span {
    margin-right: 10px;
    font-size: 14px;
    color: rgba(145, 188, 84, 0.6);
  }

  .bill-statistics .item005 {
    background: rgba(243, 144, 92, 0.3);
  }

  .bill-statistics .item005 i {
    color: rgba(243, 144, 92, 1);
  }

  .bill-statistics .item005 .name {
    font-size: 18px;
    color: rgba(243, 144, 92, 1);
  }

  .bill-statistics .item005 .name span {
    margin-right: 10px;
    font-size: 14px;
    color: rgba(243, 144, 92, 0.6);
  }

  .bill-statistics .item006 {
    background: rgba(254, 33, 33, 0.3);
  }

  .bill-statistics .item006 i {
    color: rgba(254, 33, 33, 1);
  }

  .bill-statistics .item006 .name {
    font-size: 18px;
    color: rgba(254, 33, 33, 1);
  }

  .bill-statistics .item006 .name span {
    margin-right: 10px;
    font-size: 14px;
    color: rgba(254, 33, 33, 0.6);
  }

  .znjMore {
    position: absolute;
    right: 15px;
    top: 15px;
  }

  .item006 ul {
    display: none;
    width: 300px;
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    box-shadow: 0px 2px 6px 0px rgba(209, 209, 209, 0.5);
    position: absolute;
    top: 44px;
    left: 0px;
    z-index: 99999;
  }

  .item006 ul li {
    line-height: 40px;
    font-size: 14px;
    text-indent: 26px;
  }

  .item006 ul li span {
    color: #FE2121;
    font-weight: 600;
    margin-left: 20px;
  }

  .item006:hover ul {
    display: block;
  }
</style>

<section id="businessListIndex">
  <hl-page-header title="账单处理">
    <hl-button type="outline" @on-click="createBill" v-if="permissions.indexOf('c175') > -1">新建账单</hl-button>
    <hl-button type="outline" @on-click="showprintSel" v-if="permissions.indexOf('c162') > -1">批量打印</hl-button>
  </hl-page-header>

  <div class="ptb-10 border-b">
    <div class="head-container clearfix">
      <div class="clearfix">
        <div class="mes">
          <p>信息检索</p>
          <div class="global_search">
            <span class="icon-Gm-search"></span>
            <input v-model="khname" autocomplete="off" type="text" class="global_ipt_text"
              placeholder="客户/合同名称/账单编号/管理编号" @keyup.enter="getData(1)" style="width:240px" />
          </div>
        </div>

        <div class="flow">
          <p>付款截止日</p>
          <div class="pull-left">
            <web-calendar v-model="beginDate" tips="起始时间" width="140"></web-calendar>
          </div>
          <span style="width:20px;" class="text-center line-height-34 inline pull-left">-</span>
          <div class="pull-left">
            <web-calendar v-model="endDate" tips="截止时间" width="140"></web-calendar>
          </div>
          <div class="pull-left thisMonth" @click="getThisMonthData">本月账单</div>
        </div>

        <div class="button-group pull-left" v-show="!isExtenseFlag">
          <hl-button @on-click="search" size="mini">查询</hl-button>
          <hl-button @on-click="resetData" size="mini">重置</hl-button>
        </div>
      </div>

      <div class="pull-left mt-10" v-if="isExtenseFlag">
        <div class="flow">
          <p>项目</p>
          <hl-select :data="projectList" v-model="projectId" :width="140" @on-change="getGroupPrimaryData"></hl-select>
        </div>
        <div class="flow">
          <p>组合</p>
          <hl-cascader :selected="selectedGroupData" :width="220" :primary-data="groupOneData"
            :secondary-data="groupTwoData" :tertiary-data="groupThreeData" @on-primary-change="selectOneGroup"
            @on-secondary-change="selectTwoGroup" @on-tertiary-change="selectThreeGroup"></hl-cascader>
        </div>
        <div class="flow">
          <p>楼宇</p>
          <hl-select :data="buildingList" v-model="buildingId" :width="140" @on-change="getbuildingId"></hl-select>
        </div>
        <div class="flow">
          <p>楼层</p>
          <hl-select :data="floorList" v-model="floorId" :width="140" @on-change="getfloorId"></hl-select>
        </div>
        <div class="flow" style="margin-right: 24px;">
          <p class="color-cfcfcf">单元</p>
          <hl-select :data="unitList" v-model="unitId" :width="140" @on-change="getunitId"></hl-select>
        </div>
        <div class="button-group pull-left">
          <hl-button @on-click="search" size="mini">查询</hl-button>
          <hl-button @on-click="resetData" size="mini">重置</hl-button>
        </div>
      </div>

      <div class="global_open_sign" @click="openSearch">
        <span v-if="!isExtenseFlag">更多筛选项</span>
        <span v-if="isExtenseFlag">收起筛选项</span>
      </div>
    </div>

    <div class=" global_screening_container">
      <div class="clearfix" style="width: 50%;">
        <div class="pull-left" style="margin-right: 45px;">
          <ul>
            <b class="mr-10" style="lineHeight:54px;float:left;">支付状态</b>
            <hl-checkbox-button style="float:left" :data="billPaymentTypeData" v-model="selectedPaymentTypeCode"
              @on-click="selectBillTypeMenu" merge></hl-checkbox-button>
          </ul>
        </div>
        <div class="pull-left">
          <ul>
            <b class="mr-10" style="lineHeight:54px;float:left;">账单类型</b>
            <hl-checkbox-button style="float:left" :data="billTypeData" v-model="selectedBillTypeCode"
              @on-click="selectBillTypeMenu" merge></hl-checkbox-button>
          </ul>
        </div>

      </div>
      <div class="clearfix" style="width: 50%;">
        <div class="pull-left" style="margin-right: 45px;">
          <ul>
            <b class="mr-10" style="lineHeight:54px;float:left;">逾期情况</b>
            <hl-checkbox-button style="float:left" :data="billOverTypeData" v-model="selectedOverTypeCode"
              @on-click="selectBillTypeMenu" merge></hl-checkbox-button>
          </ul>
        </div>
        <div class="pull-left dy-flex" style="align-items: center;">
          <ul>
            <b class="mr-10" style="lineHeight:54px;float:left;">减免情况</b>
            <hl-checkbox-button style="float:left" :data="breaksData" v-model="selectedBreaksCode"
              @on-click="selectBillTypeMenu" merge></hl-checkbox-button>
          </ul>
          <span class="global_refresh_icon icon-uniE94B" @click="resetTabbar" style="bottom:0px;left:334px;"></span>
        </div>
      </div>
    </div>

    <div class="clearfix border-b" v-if="billFlowFlag == 'Y'">
      <div class="pull-left">
        <ul>
          <b class="mr-10" style="lineHeight:54px;float:left;">处理状态</b>
          <hl-checkbox-button style="float:left;" :data="billclStateData" v-model="billclState"
            @on-click="selectBillTypeMenu" merge></hl-checkbox-button>
        </ul>
      </div>
    </div>

    <!-- 统计数据 -->
    <div class="ptb-10 dy-flex bill-statistics">
      <div class="item item001">
        <i class="icon-Nav-finance-amount icon"></i>
        <span class="name"><span>合计应收(元)</span>{{bill.amountReceived | formatNum}}</span>
      </div>
      <div class="item item002">
        <i class="icon-Nav-finance-amount icon"></i>
        <span class="name"><span>合计减免(元)</span>{{bill.amountDerate | formatNum}}</span>
      </div>
      <div class="item item003">
        <i class="icon-Nav-finance-amount icon"></i>
        <span class="name"><span>合计结转(元)</span>{{bill.amountCarrayOver | formatNum}}</span>
      </div>
    </div>
    <div class="pb-10 dy-flex bill-statistics">
      <div class="item item004">
        <i class="icon-Nav-finance-amount icon"></i>
        <span class="name"><span>合计已收(元) </span> {{bill.amountPayed | formatNum}}</span>
      </div>
      <div class="item item005">
        <i class="icon-Nav-finance-amount icon"></i>
        <span class="name"> <span>合计未收(元)</span> {{bill.amountWpay | formatNum}}</span>
      </div>
      <div class="item item006 relative" v-if="bill.lateFeeCalculateOpenFlag == 'Y'">
        <i class="icon-Nav-finance-amount icon"></i>
        <span class="name"> <span>应收滞纳金(元)</span> {{bill.lateFeeReceived | formatNum}}</span>
        <i class="icon-predict-more znjMore" style="color:#fff"></i>
        <ul class="">
          <li class="border-b color-999">
            减免滞纳金(元)<span>{{bill.lateFeeDerate | formatNum}}</span>
          </li>
          <li class="border-b color-999">
            已收滞纳金(元)<span>{{bill.lateFeePay | formatNum}}</span>
          </li>
          <li class="color-999">
            未收滞纳金(元)<span>{{bill.lateFeeRest | formatNum}}</span>
          </li>
        </ul>
      </div>
    </div>

    <!--流式布局表格-->
    <section class="fixed-config-table-container global_table" style="margin:10px 0;border:1px solid #E5E5E5"
      @mouseenter="showScroll" @mouseleave="hideScroll">
      <!-- 内容表格 -->
      <div class="fixed-config-table-wrap" :class="{'config-table-scroll':isScroll}">
        <div :style="tbTitleWidth">
          <div class="config-table-title-wrap dy-flex global_table_title">
            <div class="all-select" style="width: 90px;" v-if="showSelflag">
              <span class="js-set" :class="{'js-q-active': allcheckflag}" style="margin-left: 18px;"
                @click="selAll">全选</span>
            </div>
            <div class="config-table-title-item"
              :class="[getFlexElControl(item.name)]"
              v-if="item.isShow == 'Y'" v-for="(item,index) in tbTitle" @click=" sort(item,index)">
              <span>{{item.displayName ? item.displayName : item.name}}</span>
              <span class="icon-Gm-sort-default bt-icon" v-if="item.isSort == 'Y' && item.name == '收款时间' "><span
                  class="path1" style="fontSize:18px"></span><i class="path2" style="fontSize:18px"></i></span>
              <span class="icon-Gm-sort-default du-icon" v-if="item.isSort == 'Y' && item.name == '距到期天数' "><span
                  class="path1" style="fontSize:18px"></span><i class="path2" style="fontSize:18px"></i></span>
            </div>
          </div>

          <div class="config-table-content-wrap">
            <ul class="dy-flex global_table_item" v-for="(item,index) in bill.bills">
              <div class="all-select" style="width: 90px;" v-if="showSelflag">
                <span class="js-set" :class="{'js-q-active': item.flag}" style="margin-left: 18px;"
                  @click="sgelection(index)"></span>
              </div>
              <li class="relative"
                :class="[getFlexElControl(item1.name)]"
                v-if="item1.isShow == 'Y'" v-for="(item1,index1) in tbTitle" :style="{width:item1.width + 'px'}"
                :title="( item1.value == 'zlfName' || item1.value == 'contractName' || item1.value == 'projectName' || item1.value == 'billPeriod' )?item[item1.value]:''">
                <span
                  v-if="item1.isShow == 'Y' && item1.value != 'billState' && item1.value != 'paymentState' && item1.value != 'balanceTime' && item1.value != 'overdueDays' ">{{item[item1.value] | formatUndefined}}</span>
                <span
                  v-if=" item1.isShow == 'Y' && item1.value == 'billState' ">{{item[item1.value] | billState}}</span>
                <span
                  v-if=" item1.isShow == 'Y' && item1.value == 'paymentState' ">{{item[item1.value] | billState}}</span>
                <span
                  v-if=" item1.isShow == 'Y' && item1.value == 'balanceTime' ">{{item[item1.value] | formatDate}}</span>
                <span class="color-orange"
                  v-if=" item1.isShow == 'Y' && item1.value == 'overdueDays' ">{{item[item1.value] | overDay}}</span>
                <span class="change-abs" v-if="item1.value == 'zlfName' && item.contractAlterFlag == 'Y'">变更中</span>
              </li>
            </ul>
          </div>

        </div>
      </div>
      <!-- 操作 -->
      <div class="config-table-operate-wrap">
        <div class="title" style="backgroundColor:#F0F2FF;height:40px;">
          <div class="name">操作</div>
          <div class="extension-wrap">
            <i class="icon-predict-more extension-icon"></i>
          </div>
          <ul class="table-type-wrap">
            <li @click="selectTableType('JD')" :class="{'active': configType == 'JD' }">简单表格</li>
            <li @click="selectTableType('WZ')" :class="{'active': configType == 'WZ' }">完整表格</li>
            <li @click="selectTableType('PZ')" :class="{'active': configType == 'PZ' }">自定义表格<span
                class="icon icon-Gm-edit" @click="showTableLayer"></span></li>
          </ul>
        </div>
        <ul class="button-group">
          <li v-for="(item,index) in bill.bills" class="global_table_item">
            <a @click="submitBill(item.contractId,item.id,item.amountReceived,item.lateFeeReceive,item.lateFeePayed,item.billTypeCode,item.intentId,item)"
              v-if="(item.billState == 'WTJ' || item.billState == 'BRJ') && item.contractAlterFlag == 'N'">提交</a>
            <a target="_blank"
              :href="'#/billDetail?id='+item.id+'&aid='+item.contractId+'&page=businessList&ddtab=true'">查看</a>
            <a @click="toCarryOverUrl(item)"
              v-show="permissions.indexOf('c327') > -1 && item.contractAlterFlag == 'N'">结转</a>
          </li>
        </ul>
      </div>
    </section>

    <div class="user-page ptb-10 clearfix">
      <div class="pull-left user-page-num">
        <span class="font-14">共<i>{{totalCount}}</i>条记录</span>
        <span>每页<hl-select :data="pages" v-model="pageCount" width="80" @on-change="getDateTime"></hl-select>条</span>
      </div>
      <div class="pull-right">
        <hl-pagination v-model="currentPage" :total="totalPage" @change="getData"></hl-pagination>
      </div>
    </div>

    <!-- 打印收款 -->
    <div class="mt-15" v-if="showSelflag">
      <hl-button type="primary" @on-click="printAll" v-if="printpaytype == 'print'">确认打印</hl-button>
    </div>

    <!-- 提交账单 -->
    <hl-dialog :visible="submitPopFlag" title="提交账单" @on-close="closeBillPop">
      <div class="pl-24 pr-24 content-pop content-24">
        <div class="ml-24 dy-flex" style="line-height:32px;">
          <div class="dy-fx-1">正在提交：</div>
          <div class="dy-fx-3">{{submitBillMes.zlfCompany}} {{submitBillMes.beginDate | formatDate}} 至
            {{submitBillMes.endDate | formatDate}} 账单</div>
        </div>
        <div class="ml-24 dy-flex" style="line-height:32px;">
          <div class="dy-fx-1">付款截止日期：</div>
          <div class="dy-fx-3">{{submitBillMes.deadlineDate | formatDate}}</div>
        </div>
        <div class="ml-24 dy-flex" style="line-height:32px;">
          <div class="dy-fx-1">本次应收本金：</div>
          <div class="dy-fx-3">{{submitBillMes.amountTPay-submitBillMes.amountCarryover | formatNum}}</div>
        </div>
        <div class="ml-24 dy-flex" style="line-height:32px;">
          <div class="dy-fx-1">本次应收滞纳金：</div>
          <div class="dy-fx-3">{{submitBillMes.lateFeeTPay | formatNum}}</div>
        </div>
        <div class="ml-24 dy-flex" style="line-height:32px;">
          <div class="dy-fx-1">本次应退：</div>
          <div class="dy-fx-3">
            {{(submitBillMes.refundTPay-submitBillMes.refundCarryover) > 0 ? '-' : ''}}{{(submitBillMes.refundTPay-submitBillMes.refundCarryover) | formatNum}}
          </div>
        </div>
        <div class="ml-24 dy-flex" style="line-height:32px;">
          <div class="dy-fx-1">本次应收合计：</div>
          <div class="dy-fx-3">
            {{(submitBillMes.amountTPay + submitBillMes.lateFeeTPay - (submitBillMes.refundTPay-submitBillMes.refundCarryover) - submitBillMes.amountCarryover) | formatNum}}
          </div>
        </div>
      </div>
      <div slot="footer">
        <hl-button type="primary" @on-click="confirmSubmitBill">确认提交</hl-button>
        <hl-button type="outline" @on-click="closeBillPop">返回修改</hl-button>
      </div>
    </hl-dialog>

    <!-- 自定义列表项弹出层 -->
    <div class="pop box-o-shadow config-table-layer" v-show="isShowTableLayer">
      <div class="head-pop font-16"><span>自定义列</span>
        <button class="fw-close absolute close" type="button" @click="closeTableLayer">×</button>
      </div>
      <div class="content-pop">
        <div class="content text-center">
          <ul class="title-wrap">
            <li class="dy-fx-1">名称</li>
            <li class="dy-fx-2">自定义名称</li>
            <li class="dy-fx-1">状态</li>
          </ul>
          <div class="ctx-wrap" id="sortableTable">
            <ul :class="{ 'active': item.isActive == 'Y' }" v-for="(item,index) in sortTableTitle"
              @mouseenter="showhighLightTitleItem(item,index)" @mouseleave="removehighLightTitleItem(item,index)">
              <li class="sort-sign" :class="{ 'active':item.isActive == 'Y' }">排序</li>
              <li class="dy-fx-1 name">{{item.name}}</li>
              <li class="dy-fx-2">
                <input type="text" class="form-control" v-model="item.displayName">
              </li>
              <li class="dy-fx-1 ">
                <span class="show-icon "
                  :class="{'icon-Nav-contract-choice':item.isShow == 'Y' , 'icon-uncheck':item.isShow == 'N' }"
                  @click="selectedTitleItem(item,index)">显示</span>
                <span class="hide-icon "
                  :class="{'icon-Nav-contract-choice':item.isShow == 'N' , 'icon-uncheck':item.isShow == 'Y' }"
                  @click="cancelSelectedTitleItem(item,index)">隐藏</span>
              </li>
            </ul>

          </div>
        </div>
      </div>
      <div class="fw-button">
        <button type="button" class="fw-submit yes" @click="confirmSubmitTable">确定</button>
        <button type="button" class="fw-submit no" @click="closeTableLayer">取消</button>
      </div>
    </div>

    <div class="backdrop" v-if="submitPopFlag"></div>
    <div class="backdrop" v-if="isShowTableLayer"></div>

    <div v-if="IsCompareRentAmtFlag" class="bill-pop dy-flex z-999"
      style="width: 100%;height: 100%;position: fixed;left: 0;top: 0;background-color: rgba(0,0,0,.5);justify-content: center;align-items: center;">
      <div style="width: 400px;background: #fff;" class="br-4 relative overflow">
        <div @click="IsCompareRentAmtFlag = !IsCompareRentAmtFlag"
          class="absolute icon-Gm-close font-16 close text-center line-height-45"
          style="right: 0;top: 0;width: 45px;height: 45px;"></div>
        <h3 class="font-18 text-center" style="color:#565E99; padding-top: 30px;">提交失败</h3>
        <p class="font-14 text-center ptb-20">此账单包含营业额抽成，营业额抽成应收金额待确认</p>
        <div class="dy-flex line-height-45 text-center">
          <div class="dy-fx-1 cursor" style="background-color: #565E99; color:#fff;" @click="gotoCommisson">前往确认</div>
          <div class="dy-fx-1 cursor" style="background-color: #f9f9f9;"
            @click="IsCompareRentAmtFlag = !IsCompareRentAmtFlag">取消</div>
        </div>
      </div>
    </div>
</section>

<script src="modules/system_config/scripts/right_company.js" charset="utf-8"></script>
<script src="modules/bill/scripts/business_list.js" charset="utf-8"></script>
